<template>
    <div>
      <van-cell>
        <!-- 标题区域的插槽 -->
        <template #title>
          <div class="title-box">
            <!-- 标题 -->
            <span>{{artobj.title}}</span>
            <van-image :src="artobj.cover.images[0]" v-if="artobj.cover.type===1" class="thumb">
              <template v-slot:error><img src="https://img2.baidu.com/it/u=90066920,795781027&fm=253&fmt=auto&app=138&f=JPEG?w=658&h=441" alt=""></template>
            </van-image>
          </div>
          <!-- 多图 -->
          <div v-if="artobj.cover.type>1" class="thumb-box">
            <van-image lazy-load class="thumb" v-for="item in artobj.cover.images" :src="item" alt="" :key="item">
              <template v-slot:error><img src="https://img2.baidu.com/it/u=90066920,795781027&fm=253&fmt=auto&app=138&f=JPEG?w=658&h=441" alt=""></template>
            </van-image>
          </div>
        </template>
        <!-- label区域的插槽 -->
        <template #label>
          <div class="label-box">
            <div>
              <span >{{artobj.aut_name}}</span>
              <span>{{artobj.comm_count}}评论</span>
              <span>{{time}}发表</span>
            </div>
            <van-icon name="cross" @click.stop="iconClick(artobj.art_id)" v-if="isShow"></van-icon>
          </div>
        </template>
        <template></template>
      </van-cell>

      <!-- 反馈面板 -->
      <van-action-sheet
      v-model="show"
      :actions="action"
       @select="onSelect"
       :cancel-text="bottomText"
       @cancel="cancelFn"
       @closed="closedFn"
        >
      </van-action-sheet>
    </div>
</template>

<script>
import { timeAgo } from '@/utils/date'

import { firstActions, secondActions } from '@/api/report'
export default {
  data () {
    return {
      show: false,
      action: firstActions,
      bottomText: '取消',
      // 点击叉号时拿到文章id
      articleID: 0,
      // 做时间处理
      time: timeAgo(this.artobj.pubdate)
    }
  },
  props: {
    artobj: Object,
    // 小叉号的显示与隐藏，默认值为true
    isShow: {
      type: Boolean,
      default: true
    }
  },
  methods: {
    // 选择控制面板的选项触发事件
    onSelect (action, index) {
      // 默认情况下点击选项时不会自动收起
      // 可以通过 close-on-click-action 属性开启自动收起
      // 一级反馈面板---点击了“反馈垃圾内容”
      if (index === 1) {
        this.action = secondActions
        this.bottomText = '返回'
      } else if (action.name === '不感兴趣') { // 一级反馈面板---点击了“不敢兴趣”
        // 调用接口
        this.$emit('dislike', this.artobj)
        this.show = false // 关闭弹窗
      } else {
        // 二级反馈面板---点击了“举报某一项”
        this.$emit('reports',
          {
            target: this.artobj.art_id,
            type: action.value,
            remark: '就是其他问题'
          })
        this.show = false
      }
    },

    // 点击取消按钮时触发
    cancelFn () {
      if (this.bottomText === '返回') {
        this.show = true
        this.action = firstActions
        this.bottomText = '取消'
      }
    },

    // 关闭面板且动画结束触发
    closedFn () {
      this.action = firstActions
      this.bottomText = '取消'
    },

    // 点击显示面板进行反馈
    iconClick (id) {
      console.log(id)
      this.articleID = id
      this.show = true
    }

  }

}
</script>

<style lang="less" scoped>
.title-box,
.label-box{
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.label-box span{
  margin:0 3px;
  &:first-child{
    margin-left: 0;
  }
}
.thumb {
  width: 113px;
  height: 70px;
  background-color: #f8f8f8;
  object-fit: cover;
}
/* 三图, 图片容器 */
.thumb-box {
  display: flex;
  justify-content: space-between;
}
</style>
